<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="编辑地址" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="coreshop-padding-10" v-if="alert.show">
			<u-alert :title="alert.title" type="error" :description="alert.description" effect="dark"></u-alert>
		</view>

		<view class="coreshop-padding-10">
			<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
				<u-form-item label="收货人" prop="name" borderBottom clearValidate>
					<u--input v-model="form.name" placeholder="请填写收货人姓名" />
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom clearValidate>
					<u--input v-model="form.mobile" placeholder="请填写收货人手机号" />
				</u-form-item>

				<u-form-item label="省市县" borderBottom>
					<coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList"
						:default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
						<template slot="suffix">
							<!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
							<u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
						</template>
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
						<template slot="suffix">
							<!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
							<u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
						</template>
					</u--input>
					<!-- #endif -->
				</u-form-item>

				<u-form-item label="街道社区" borderBottom @click="toMap">
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input :value="form.street" type="text" disabled placeholder="请定位">
						<template slot="suffix">
							<u-button text="请选择" type="success" size="mini"></u-button>
						</template>
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input :value="form.street" type="text" disabled placeholder="请定位">
						<template slot="suffix">
							<u-button text="请选择" type="success" size="mini"></u-button>
						</template>
					</u--input>
					<!-- #endif -->
				</u-form-item>

				<!--<u-form-item label="经度" prop="longitude" borderBottom>
                    <u--input v-model="form.longitude" disabled placeholder="请选择街道获取经度" />
                </u-form-item>

                <u-form-item label="纬度" prop="latitude" disabled borderBottom>
                    <u--input v-model="form.latitude" disabled placeholder="请选择街道获取纬度" />
                </u-form-item>-->

				<u-form-item label="详细地址" prop="address" borderBottom clearValidate>
					<u--textarea v-model="form.address" placeholder="请输入内容"></u--textarea>
					<!--<u--input  v-model="form.address" placeholder="请填写收货详细地址" type="textarea" />-->
				</u-form-item>
				<u-form-item label="设为默认">
					<u-switch slot="right" v-model="checked"></u-switch>
				</u-form-item>
			</u--form>
		</view>

		<view class="coreshop-bottomBox">
			<button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="delShip" v-if="id && id != 0"
				:disabled='submitStatus' :loading='submitStatus'>删除</button>
			<!-- #ifdef MP-WEIXIN -->
			<button class="coreshop-btn coreshop-btn-square coreshop-btn-w" type="primary" @click="wechatAddress"
				v-if="!id">从微信获取</button>
			<!-- #endif -->
			<button class="coreshop-btn coreshop-btn-square coreshop-btn-b" type="warn" @click="saveShip" :disabled='submitStatus'
				:loading='submitStatus'>保存</button>
		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	// #ifdef APP-PLUS || APP-PLUS-NVUE
	// #endif
	export default {
		data() {
			return {
				id: 0,
				form: {
					name: '',
					mobile: '',
					address: '',
					isDefault: 2,
					longitude: '',
					latitude: '',
					street: ''
				},
				longitude: 0,
				latitude: 0,
				region: ['湖南省', '怀化市', '鹤城区'],
				areaId: 0,
				checked: false,
				pickerValue: '',
				submitStatus: false,
				show: false,
				pickerList: this.$db.get("areaList"),
				province: this.$db.get("areaList"),
				pickerIndex: [17, 11, 1], // picker索引值
				provinceKey: 17, //省份id
				cityKey: 11, //市id
				areaKey: 1, //区域id
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 10,
							message: '姓名长度在2到10个字长',
							trigger: ['change', 'blur'],
						}
					],
					address: [{
							required: true,
							message: '请输入地址',
							trigger: 'blur',
						},
						{
							min: 5,
							max: 50,
							message: '地址长度在5到50个字符',
							trigger: ['change', 'blur'],
						}
					],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
				alert: {
					title: '获取定位失败，请检查是否开启定位功能。',
					description: '未获取到您的经纬度坐标，我们需要获取您的经纬度坐标，来计算与发货点的配送距离。不然无法开启同城配送计算运费。',
					closable: true,
					show: false
				},
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			const chooseLocation = requirePlugin('chooseLocation');
			const location = chooseLocation.getLocation();
			// #endif
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			const location = uni.getLocation();
			// #endif
			if (location != null) {
				this.form.latitude = location.latitude;
				this.form.longitude = location.longitude;

				this.region = [location.province, location.district, location.city];
				this.form.street = location.name;
				this.form.address = location.address;
				console.log("location1:", location);
			}
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			// #ifdef MP-WEIXIN
			chooseLocation.setLocation(null);
			// #endif
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			//uni.setLocation(null);
			// #endif
		},
		onLoad(e) {
			this.getMyLocation();
			if (e.shipId) {
				//编辑
				this.id = e.shipId;
				this.getShipInfo();
			} else {
				//添加（取消初始化）
				//this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2];
				//this.init();
			}
		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获取自己的位置信息
			getMyLocation() {
				let _this = this;
				// #ifdef MP-WEIXIN
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						console.log('当前位置的经度1：' + res);
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						console.log('当前位置的经度2：' + res);
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					}
				});
				// #endif
			},
			onConfirm(e) {
				console.log(e);
				let provinceName = e[0].label;
				let cityName = e[1].label;
				let countyName = e[2].label;
				this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
				let data = {
					provinceName: provinceName,
					cityName: cityName,
					countyName: countyName
				}
				this.$u.api.getAreaId(data).then(res => {
					if (res.status) {
						this.areaId = res.data;
						this.init();
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				});
			},
			//编辑获取收货地址信息
			getShipInfo() {
				let data = {
					id: this.id
				}
				this.$u.api.shipDetail(data).then(res => {
					if (res.status) {
						let region = res.data.areaName.split(" ");
						this.form.name = res.data.name;
						this.form.mobile = res.data.mobile;
						this.region = region;
						this.areaId = res.data.areaId;
						this.init();
						this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]
						this.form.address = res.data.address;
						this.form.isDefault = res.data.isDefault;
						this.form.longitude = res.data.longitude;
						this.form.latitude = res.data.latitude;
						this.form.street = res.data.street;
						if (res.data.isDefault) {
							this.checked = true;
							this.isDefault = 1;
						} else {
							this.checked = false;
							this.isDefault = 2;
						}
					} else {
						this.$u.toast('获取收货地址信息出现问题');
						// this.submitStatus = false;
					}
					this.submitStatus = false;
				});
			},
			//删除地址
			delShip() {
				this.submitStatus = true;
				this.$u.api.removeShip({
					'id': this.id
				}).then(res => {
					this.submitStatus = false;
					if (res.status) {
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						this.$u.toast(res.msg);
						// this.submitStatus = false;
					}
				});
			},
			//存储收货地址
			saveShip() {
				this.$refs.uForm.validate().then(res => {
					console.log('验证通过');
					if (this.checked) {
						this.form.isDefault = 1;
					} else {
						this.form.isDefault = 2;
					}
					this.submitStatus = false;
					if (!this.form.name) {
						this.$u.toast('请输入收货人姓名')
						return false
					} else if (!this.form.mobile) {
						this.$u.toast('请输入收货人手机号')
						return false
					} else if (this.form.mobile.length !== 11) {
						this.$u.toast('收货人手机号格式不正确')
						return false
					} else if (this.areaId <= 0) {
						this.$u.toast('请选择地区信息')
						return false
					} else if (!this.form.street) {
						this.$u.toast('请选择街道')
						return false
					} else if (!this.form.latitude) {
						this.$u.toast('请选择街道获取纬度')
						return false
					} else if (!this.form.longitude) {
						this.$u.toast('请选择街道获取经度')
						return false
					}
					let data = {
						name: this.form.name,
						address: this.form.address,
						mobile: this.form.mobile,
						isDefault: this.form.isDefault,
						areaId: this.areaId,
						longitude: this.form.longitude,
						latitude: this.form.latitude,
						street: this.form.street,
					}
					if (this.id && this.id != 0) {
						//编辑存储
						data.id = this.id
						this.$u.api.editShip(data).then(res => {
							this.submitStatus = false;
							if (res.status) {
								this.$refs.uToast.show({
									message: res.msg,
									type: 'success',
									complete: function() {
										uni.navigateBack({
											delta: 1
										});
									}
								})
							} else {
								this.$u.toast(res.msg);
								// this.submitStatus = false;
							}
						});
					} else {
						//添加
						this.$u.api.saveUserShip(data).then(res => {
							this.submitStatus = false;
							if (res.status) {
								this.$refs.uToast.show({
									message: res.msg,
									type: 'success',
									complete: function() {
										uni.navigateBack({
											delta: 1
										});
									}
								})
							} else {
								this.$u.toast(res.msg);
								// this.submitStatus = false;
							}
						});
					}
				}).catch(errors => {
					uni.$u.toast('提交的数据校验失败，请输入合法信息！')
				})
			},
			//倒查城市信息
			getFullPath(id, data) {
				for (var i = 0; i < data.length; i++) {
					if (id == data[i].value) {
						if (!data[i].children) {
							this.areaKey = i;
							return true;
						} else if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] && !data[i].children[0].children) {
								this.cityKey = i;
								return true;
							} else {
								this.provinceKey = i;
								return true;
							}
						}
					} else {
						if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] !== undefined) {
								if (data[i].children[0].hasOwnProperty("children")) {
									this.provinceKey = i;
								} else {
									this.cityKey = i;
								}
							}
							if (typeof data[i].children != 'undefined') {
								var res = this.getFullPath(id, data[i].children);
								if (res) {
									return true;
								}
							}
						}
					}
				}
			},
			init() {
				this.getFullPath(this.areaId, this.province);
				this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
			},
			toMap() {
				// #ifdef MP-WEIXIN
				const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
				const referer = this.$store.state.config.shopName; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: this.form.latitude == "" ? this.latitude : this.form.latitude,
					longitude: this.form.longitude == "" ? this.longitude : this.form.longitude
				});
				const category = '';

				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + txMapkey + '&referer=' + referer + '&location=' +
						location + '&category=' + category
				});
				// #endif

				// #ifdef APP-PLUS || APP-PLUS-NVUE
				uni.chooseLocation({
					success: (res) => {
						this.form.street = res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
					}
				});
				// #endif
			},
			// #ifdef MP-WEIXIN
			wechatAddress() {
				let _that = this;
				wx.chooseAddress({
					success: res => {
						if (res.errMsg == "chooseAddress:ok") {
							//获取成功
							_that.form.name = res.userName;
							_that.form.mobile = res.telNumber;
							_that.form.address = res.detailInfo;

							_that.pickerValue = res.provinceName + " " + res.cityName + " " + res.countyName;
							let data = {
								provinceName: res.provinceName,
								cityName: res.cityName,
								countyName: res.countyName,
							};
							this.$u.api.getAreaId(data).then(res => {
								if (res.status) {
									this.areaId = res.data;
									this.init();
								} else {
									uni.showModal({
										title: '提示',
										content: '地区选择出现问题，请重新选择地区',
										showCancel: false
									});
								}
							});

							console.log(res);
						} else {
							this.$refs.uToast.show({
								title: '获取微信地址失败',
								type: 'error'
							});
						}
					}
				});
			},
			// #endif

		},

	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>
